<template>
<!--  <div class="row justify-center container-row" ref="el">-->
<!--    <div class="col-8">-->
      <div class="justify-center row-padding container-xxl container-row">
        <div class="section-heading gutter-bottom--page">
          <div class="section-heading__text remove-empty-space">
            <span class="section-heading__title">{{ title }}</span>
          </div>

          <div class="" v-if="rightTitle !== undefined && rightTitle !== ''">
            <router-link class="" :to="rightLink" >{{ rightTitle }}</router-link>
          </div>
        </div>

        <slot name="default">
        </slot>
      </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose} from 'vue'

defineProps({
  title: {
    type: String,
    request: true
  },
  rightTitle: {
    type: String,
    default: () => ""
  },
  rightLink: {
    type: String,
    default: "/pc/pcHome"
  },
})

const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>
.row-padding{
  padding: 15px 40px 0 40px;
  margin-top: 100px;
}

.container--vertical-space {
  margin-top: 85px;
}

.remove-empty-space>*:first-child {
  margin-top: 0;
}

.gutter-bottom--page {
  margin-bottom: calc(50px * .8);
}
.section-heading {
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-heading__text {
  padding-inline-end: 10%;
  word-break: break-word;
}

a {
  color: #1d1d1d;
  border-bottom: 1px solid;
  padding-bottom: 1px;
  transition: all .1s linear;
  font-size: 24px;
}
.section-heading__title{
  font-size: 32px;
  font-weight: 800;
  cursor: text;
}
</style>